<template>
	<div class="hotedit common-layout">
		<el-container>
			<el-header>
				<h3>热点管理</h3>
			</el-header>
			<el-main>
				<p>
					<label>描述</label>
					<el-input v-model.lazy="memo" />
				</p>
				<p>
					<label>热度</label>
					<el-input v-model.lazy="hot" />
				</p>
				<p>
					<label>类型</label>
					<el-input v-model.lazy="type" />
				</p>
				<p>
					<label>图片</label>
					<input type="file" ref="pic"/>
				</p>
				<p>
					<router-link to="/admin/banner">返回</router-link>
					<input type="button" value="上传" @click="add()"/>
				</p>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default{
		name:'Hotedit',
		data(){
			return{
				memo:'',
				hot:1,
				type:1,
				pic:''
			}
		},
		methods:{
			add(){
				this.axios.get('/api/public/findHot/5/1').then((res)=>{
					if (res.status==200) {
						let arr=res.data.data
						if (arr.length<6) {
							//上传的value是files
							let fs=this.$refs.pic.files
							if (fs.length>0&&fs[0]!='' && this.memo!=''&&this.hot!=''&&this.type!='') {//判断是否有上传图片
								//创建空的表单对象数据
								let fd=new FormData()
								//将需要打包的数据，
								fd.append('memo',this.memo)
								fd.append('hot',this.hot)
								fd.append('type',this.type)
								fd.append('pic',fs[0])
								
								this.axios.post('/api/adm/hot/addHot',fd,{
									header:{'Content-Type':'multipart/form-data'}
								}).then((res)=>{
									if (res.data.code==200) {
										this.$router.push('/admin/banner')
									}else{
										alert(res.data.msg)
									}
								}).catch((error)=>{
									console.log(error)
								})
							}
						}
					}
				}).catch((error)=>{
					console.log(error)
				})
			}
		}
	}
</script>

<style scoped>
	.hotedit{
		width: 100%;
	}
	.hotedit h3{
		font-size: 23px;
		line-height: 50px;
	}
	.hotedit p{
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
	}
	.hotedit p label{
		font-size: 20px;
		font-weight: bold;
		padding-right: 10px;
		width: 5%;
	}
	.hotedit p:last-child{
		width: 90%;
		border-top: 1px solid gainsboro;
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
	}
</style>
